<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: silver;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin: 0 auto;
            margin-top: 200px;
            /* 
                变形就是指通过CSS来改变元素的形状或者位置
                -变形行不会影响到页面的布局
                -transform用来设置元素的变形效果
                -平移：
                 translateX()沿着x轴方向平移
                 translateY()沿着Y轴方向平移
                 translateZ()沿着Z轴方向平移
                    -平移元素，百分比是相对于自身计算的
            */
            /* transform:translateX(100px); */
            transform: translateX(10%);
        }
           /* .box2{
               width:200px;
               height: 200px;
               background-color: orange;
               margin: 0 auto;

           } */
           .box3{
               background-color: orange;
               position: absolute;
               /*这种居中方式,只适用于元素的大小确定
               top:0;
               left:0;
               bottom: 0;
               right: 0;
               margin: auto; */
               left: 50%;
               top:50%;
               transform: translateX(-50%) translateY(-50%);
           }
           .box4,.box5{
               width: 220px;
               height: 300px;
               background-color: yellowgreen;
               float: left;
               margin:  0 10px;
               transition: all .3s;
           }
           .box4:hover,.box5:hover{
               transform: translateY(-4px);
               box-shadow: 0 0 10px rgba(0,0,0,.3);
           }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">1111</div>
    <div class="box4"></div>
    <div class="box5"></div>
    
</body>
</html>